<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fc="http://fctracker.com/facelets"
	xmlns:pe="http://primefaces.org/ui/extensions">

	<f:facet name="last">
		<h:outputStylesheet library="css" name="foodTable.css" />
	</f:facet>
	<p:fieldset legend="Kalóriatáblázat">
		<!-- 	<h1>Kalóriatáblázat</h1> -->
		<h:form id="foodTableForm">
			<p:panelGrid columns="2">
				<p:outputLabel for="foodgroup" value="Csoport" />
				<p:selectOneMenu id="foodgroup"
					value="#{foodTableController.foodGroup}"
					valueChangeListener="#{foodTableController.requestRefresh}">
					<f:selectItem itemLabel="" itemValue="" />
					<f:selectItems value="#{foodGroupService.findAll()}" />
					<f:converter binding="#{foodGroupConverter}" />
					<f:ajax update="foodTable" render="foodTable" />
				</p:selectOneMenu>

				<p:outputLabel for="boolbtn"
					value="Alapértelmezett ételek látszódjanak" />
				<p:selectBooleanButton id="boolbtn"
					valueChangeListener="#{foodTableController.requestRefresh}"
					value="#{foodTableController.systemValuesShowed}" onLabel="Igen"
					offLabel="Nem">
					<f:ajax update="foodTable" render="foodTable" />
				</p:selectBooleanButton>
			</p:panelGrid>

			<p:dataTable id="foodTable" var="food"
				value="#{foodTableController.foods}" paginator="true" rows="5"
				paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
				paginatorPosition="bottom" rowKey="#{food.id}"
				selection="#{foodTableController.selected}" selectionMode="single"
				emptyMessage="Az adott paraméterekkel nem található étel."
				filteredValue="#{foodTableController.filtered}"
				rowStyleClass="#{foodTableController.getRowStyleClass(food)}">

				<f:ajax event="rowSelect" update=":detailsdiv" render=":detailsdiv" />

				<p:column headerText="Név" filterBy="name"
					filterMatchMode="contains" sortBy="name">
					<h:outputText value="#{food.name}" />
				</p:column>
				<p:column headerText="Mennyiség" styleClass="colQuantity">
					<h:outputText value="#{food.quantity}">
						<f:convertNumber maxFractionDigits="2" minFractionDigits="0" />
					</h:outputText>
				 #{food.unitOfMeasurement.name}
			</p:column>
				<p:column headerText="Kalória (kcal)" sortBy="calorie"
					styleClass="colNumber">
					<h:outputText value="#{food.calorie}" />
				</p:column>
				<p:column headerText="Fehérje (g)" sortBy="protein"
					styleClass="colNumber">
					<h:outputText value="#{food.protein}">
						<f:convertNumber maxFractionDigits="2" minFractionDigits="0" />
					</h:outputText>
				</p:column>
				<p:column headerText="Szénhidrát (g)" sortBy="carbohydrate"
					styleClass="colNumber">
					<h:outputText value="#{food.carbohydrate}">
						<f:convertNumber maxFractionDigits="2" minFractionDigits="0" />
					</h:outputText>
				</p:column>
				<p:column headerText="Zsír (g)" sortBy="fat" styleClass="colNumber">
					<h:outputText value="#{food.fat}">
						<f:convertNumber maxFractionDigits="2" minFractionDigits="0" />
					</h:outputText>
				</p:column>
				<p:column headerText="Rost (g)" sortBy="fiber"
					styleClass="colNumber">
					<h:outputText value="#{food.fiber}">
						<f:convertNumber maxFractionDigits="2" minFractionDigits="0" />
					</h:outputText>

				</p:column>
				<p:column headerText="GI" sortBy="glicemicIndex"
					styleClass="colNumber">
					<h:outputText value="#{food.glicemicIndex}" />
				</p:column>

				<p:column headerText="Műveletek" styleClass="colActions">
					<p:commandButton icon="ui-icon-info"
						actionListener="#{addFoodDialog.show()}">
						<f:setPropertyActionListener target="#{addFoodDialog.title}"
							value="Étel - Részletek" />
						<f:setPropertyActionListener target="#{addFoodDialog.mode}"
							value="view" />
						<f:setPropertyActionListener target="#{addFoodDialog.food}"
							value="#{food}" />
					</p:commandButton>

					<p:commandButton update="foodTable" render="foodTable"
						disabled="#{food.user.id == 1}" icon="ui-icon-trash"
					action="#{foodTableController.requestRefresh}"
						actionListener="#{foodTableController.delete(food)}" ajax="true" />

					<p:commandButton icon="ui-icon-arrowrefresh-1-e"
						disabled="#{food.user.userName == 'system'}"
						action="#{addFoodDialog.show()}">
						<p:ajax event="dialogReturn" update="foodTable" render="foodTable"
							listener="#{foodTableController.requestRefresh}" />
						<f:setPropertyActionListener target="#{addFoodDialog.title}"
							value="Étel - Módosítás" />
						<f:setPropertyActionListener target="#{addFoodDialog.mode}"
							value="update" />
						<f:setPropertyActionListener target="#{addFoodDialog.food}"
							value="#{food}" />
					</p:commandButton>
				</p:column>

				<f:facet name="footer">
					<p:commandButton value="" styleClass="addButton"
						action="#{addFoodDialog.show()}">
						<p:ajax event="dialogReturn" update="@form"
							listener="#{foodTableController.requestRefresh}" />
						<f:setPropertyActionListener target="#{addFoodDialog.mode}"
							value="create" />
						<f:setPropertyActionListener target="#{addFoodDialog.food}"
							value="#{null}" />
					</p:commandButton>
				</f:facet>
			</p:dataTable>


		</h:form>
	</p:fieldset>
	<p:fieldset style="margin-top: 10px">
		<h:panelGroup layout="block" id="detailsdiv">
			<h:panelGroup rendered="#{foodTableController.selected != null}">
				<fc:foodData food="#{foodTableController.selected}" showName="true" />
			</h:panelGroup>
		</h:panelGroup>
	</p:fieldset>
</ui:composition>